<template>
    <div>
        <div class="body-content">
            <div class="content-main">
                <div class="list">
                    <!-- 移动端 -->
                    <div class="w sousuo adapt-m" style="overflow-x: scroll;" v-if="countrylist.length > 0">
                        <ul class="country_a">
                            <li><a :class="[actionTab == 0? 'action' : '']" @click="countryTabBtn()">不限</a></li>
                            <li v-for="(it,index) in countrylist" :key="index">
                                <a :class="[actionTab == (index+1)? 'action' : '']" @click="countryTabBtn(it.id, index+1)">{{it.name}}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- PC -->
                    <div class="w sousuo adapt-pc" style="margin-bottom: 0;" v-if="countrylist.length > 0">
                        <span>意向国家：</span>
                        <ul class="country_a">
                            <li><a :class="[actionTab == 0? 'action' : '']" @click="countryTabBtn()">不限</a></li>
                            <li v-for="(it,index) in countrylist" :key="index">
                                <a :class="[actionTab == (index+1)? 'action' : '']" @click="countryTabBtn(it.id, index+1)">{{it.name}}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- 房源列表 start-->
                    <div class="w box houselist">
                        <p class="h2 adapt-pc">为您精心筛选优质的房源</p>
                        <div id="Js_data">
                            <!-- 循环开始 -->
                            <div class="min_box" v-for="(item,index) in houselist" :key="index">
                                <div class="btn Js-zixun adapt-pc">马上咨询</div>
                                <router-link :to="{path:'/HouseDetail',query:{id:item.id}}">
                                    <!-- 轮播 start -->
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide bg-img"  v-for="(it,ind) in item.bannerUrl" :key="ind">
                                                <img :src="getImage(it)"/>
                                            </div>
                                        </div>
                                        <!-- 轮播-分页器 -->
                                        <div class="swiper-pagination swiper-pagination-white"></div>
                                        <!-- 轮播-导航按钮 -->
                                        <!-- <div class="swiper-button-next swiper-button-white"></div>
                                        <div class="swiper-button-prev swiper-button-white"></div> -->
                                    </div>
                                    <!-- 轮播 end -->
                                    <div class="JS_m description">
                                        <!--<i src="" class="national-flag bg-img adapt-pc" style="background-image: url('/Public/Admin/Uploads/2018-04-28/5ae3d7ade69eb.png');"></i>-->
                                       
                                        <p class="title">
                                            <img :src="getImage(item.country.icon)" style="width: 36px;height: 24px;border-radius:5px;margin-top: -4px;"/>
                                            {{item.country.name}}{{item.name}}</p><span class="link-detail adapt-pc">详情 >></span><br>
                                        <p class="baseinfo">{{item.tags.split("###")[0]}}／{{item.usedArea}}㎡</p>
                                        <p class="address adapt-pc">地址：{{item.address}}</p>
                                        <!-- <p class="trend">近一年房价涨幅<span class="stress">{{item.rise}}</span><i class="gap">|</i>年均租金收益<span class="stress">{{item.yearRent}}</span></p> -->
                                        <div class="price">
                                            <p class="rmb"><span class="rmb-flag"></span><span class="stress">{{item.price.split("###")[0]}}</span></p>
                                            <p class="dollar">{{item.price.split("###")[1]}}</p>
                                        </div>
                                        <div class="flaglist clearfix">
                                            <span class="flagitem" v-for="aitem in (item.layout.split('###'))" style="background-color: #9ae03f">{{aitem}}</span>
                                            <!--<span class="flagitem" style="background-color: #af09a3">移民房</span>-->
                                            <!--<span class="flagitem" style="background-color: #f28b66">精装修</span>-->
                                            <!--<span class="flagitem" style="background-color: #9ae03f">花园洋房</span>                            -->
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </div>

                        <div class="add" v-if="totalPage > limit" @click="addPushList">浏览更多</div>
                    </div>
                </div>
            </div>
        </div>
        <loading :loadingState="loadingState" />
    </div>
</template>
<script>
import loading from "@/components/loading.vue";
import httpApi from '@/api/index'
import { mapGetters } from 'vuex'
export default {
    data(){
        return{
            countrylist:[],
            houselist:[],
            actionTab: 0,
            pageIndex: 1,
            limit: 10,
            totalPage: 0,
            countryId: "",
            loadingState: true
        }
    },
    created () {
        if(this.$route.query.id){
            this.countryId = this.$route.query.id;
        }
        this.getcountry();
        this.getlist(this.pageIndex);
    },
    watch: {
        // 监听路由参数变化
        '$route.query.id': function (newId, oldId) {
            // 根据新的userId来更新组件的内容
            this.countryId = newId;
            this.getcountry();
            this.getlist(1);
        }
    },
    methods: {
        getImage(url){
                return this.baseApi + url;
            },
        countryTabBtn(id, index) {
            this.houselist = [];
            this.countryId = id;
            this.getlist(1);
            if(index){
                this.actionTab = index;
            }else{
                this.actionTab = 0;
            }
        },
        addPushList() {
            this.pageIndex++;
            this.getlist(this.pageIndex);
        },
        getcountry(){
            this.countrylist = [];
            httpApi.getcountryAll().then(res => {
                let data = res.data;
                data.forEach((item, index) => {
                    // if(item.id == 24 || item.id == 26 || item.id == 29 || item.id == 30 || item.id == 31 || item.id == 32){
                    //     this.countrylist.push(item)
                    // }
                    if(item.id == 26 || item.id == 29 || item.id == 30){
                        this.countrylist.push(item)
                    }
                });
                this.countrylist.forEach((item, index) => {
                    if(item.id == this.countryId) {
                        this.actionTab = index+1;
                        console.log(this.actionTab)
                    }
                });
            });
        },
        getlist(pageIndex){
            this.houselist = [];
            let params = {
                countryId: this.countryId ? this.countryId : "",
                limit: this.limit,
                page: pageIndex
            };
            httpApi.getHouseAll(params).then(res => {
                // console.log(res)
                if(res.data.length > 0){
                    res.data.forEach(item => {
                        // console.log(item,'00000')
                        if(item.bannerUrl != null){
                           item.bannerUrl = item.bannerUrl.split("###");
                            // return item
                        }
                        // this.houselist.bannerUrl
                        this.houselist.push(item);
                        // this.houselist.bannerUrl= item.bannerUrl.split("###");
                        // console.log(this.houselist,'this.houselistthis.houselist')
                    });
                    this.totalPage = res.total;
                }else{
                    this.totalPage = 0;
                }

                this.loadingState = false;
            })
        }
    },
    name: "House",
    components: {
      loading
    },
    computed: {
        ...mapGetters([ 'baseApi' ])
    }
}
</script>

<style lang="scss" scoped>
    @import "src/assets/css/project-index";
    @import "src/assets/css/house-index";

    .body-content{
      .project-banner{
          height: 300px;
          .swiper-pagination{
              bottom: 20px;
              text-align: center;
              width: 200px !important;
              margin-left: -50px;
          }
      }
    }
    @media only screen and (max-width: 960px) {
        .sousuo{
            padding: 17px 20px 0;
        }
    }
</style>